<template>
  <div>
    <van-dropdown-menu active-color="#ee0a24">
      <!-- 上下架状态 -->
      <van-dropdown-item
        v-model="productparam.publishStatus"
        :options="headerOption"
        @change="onDropdownChange"
      />

      <van-dropdown-item title="筛选" ref="item">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="推荐" name="1">
            <van-radio-group v-model="productparam.recommandStatus" direction="horizontal">
              <van-radio
                :name="item.value"
                v-for="item in recommandStatusOption"
                :key="item.value"
              >{{item.text}}</van-radio>
            </van-radio-group>
          </van-collapse-item>

          <van-collapse-item title="新品" name="2">
            <van-radio-group v-model="productparam.newStatus" direction="horizontal">
              <van-radio
                :name="item.value"
                v-for="item in newStatusOption"
                :key="item.value"
              >{{item.text}}</van-radio>
            </van-radio-group>
          </van-collapse-item>

          <van-collapse-item title="预告" name="3">
            <van-radio-group v-model="productparam.previewStatus" direction="horizontal">
              <van-radio
                :name="item.value"
                v-for="item in previewStatusOption"
                :key="item.value"
              >{{item.text}}</van-radio>
            </van-radio-group>
          </van-collapse-item>

          <van-collapse-item title="删除" name="4">
            <van-radio-group v-model="productparam.deleteStatus" direction="horizontal">
              <van-radio
                :name="item.value"
                v-for="item in deleteStatusOption"
                :key="item.value"
              >{{item.text}}</van-radio>
            </van-radio-group>
          </van-collapse-item>

          <van-collapse-item title="活动" name="5">
            <van-radio-group v-model="productparam.promotionType" direction="horizontal">
              <van-radio
                :name="item.value"
                v-for="item in promotionTypeOption"
                :key="item.value"
              >{{item.text}}</van-radio>
            </van-radio-group>
          </van-collapse-item>
        </van-collapse>
        <van-button block type="info" @click="onfitterCommit">确认</van-button>
      </van-dropdown-item>
    </van-dropdown-menu>

    <van-row>
      <van-col span="8">
        <van-sidebar v-model="activeKey" @change="ontabCategoryChange" class="tab-sidebar">
          <van-sidebar-item v-for="item in tabCategorys" :key="item.id" :title="item.name" />
        </van-sidebar>
      </van-col>

      <van-col span="16" class="tab-content">
        <van-list
          v-model="loading"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="getproductList"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-card
            v-for="item in productList"
            :key="item.id"
            :num="2"
            :price="item.price"
            :title="item.name"
            :desc="item.subTitle"
            :thumb="item.pic"
            @click="handleProject(item)"
          >
            <template #tags>
              <van-tag plain type="danger" v-if="item.promotionType >0">活动</van-tag>
              <van-tag plain type="danger" v-if="item.deleteStatus >0">已删除</van-tag>

              <van-tag plain type="danger" v-if="item.publishStatus ==1">在售中</van-tag>
              <van-tag plain type="danger" v-if="item.publishStatus ==2">审核中</van-tag>
              <van-tag plain type="danger" v-if="item.publishStatus ==3">审核失败</van-tag>
            </template>
            <template #footer v-if="item.deleteStatus !=1">
              <van-button size="mini" @click.stop="onDeleteProduct(item)">删除</van-button>
              <!-- 上架状态：0->下架；1->上架' -->
              <van-button
                size="mini"
                v-if="item.publishStatus ==0"
                @click.stop="onChangeProductPushtState(item,2)"
              >上架</van-button>
              <van-button
                size="mini"
                v-else-if="item.publishStatus ==1"
                @click.stop="onChangeProductPushtState(item,0)"
              >下架</van-button>
            </template>
          </van-card>
        </van-list>
      </van-col>
    </van-row>

    <van-goods-action>
      <van-goods-action-button type="warning" text="分类管理" @click="onClickCreateTabCategoryButton" />
      <van-goods-action-button type="danger" text="新增商品" @click="onClickProduct" />
    </van-goods-action>
  </div>
</template>
<script>
import { tabCategorylist } from "@/api/tabCategory";
import { listProduct, deleteProduct,updateProduct } from "@/api/product";
export default {
  data() {
    return {
      activeKey: 0,
      finished: false,
      loading: false,
      error: false,
      activeNames: [0, 1, 2, 3, 4, 5],
      productparam: {
        publishStatus: -1,
        deleteStatus: -1,
        newStatus: -1,
        recommandStatus: -1,
        previewStatus: -1,
        promotionType: -1,
        tabCategoryId: null,
        pageSize: 10,
        pageNum: 1
      },
      productList: [],
      tabCategorys: [],
      headerOption: [
        //<!-- 上架状态：0->下架；1->上架' -->
        { text: "全部", value: -1 },
        { text: "已下架", value: 0 },
        { text: "已上架", value: 1 },
        { text: "待审核", value: 2 },
        { text: "审核失败", value: 3 }
      ],
      deleteStatusOption: [
        //< 删除状态：0->未删除；1->已删除' -->
        { text: "全部", value: -1 },
        { text: "未删除", value: 0 },
        { text: "已删除", value: 1 }
      ],
      newStatusOption: [
        //< 新品状态:0->不是新品；1->新品 -->
        { text: "全部", value: -1 },
        { text: "不是新品", value: 0 },
        { text: "新品", value: 1 }
      ],
      recommandStatusOption: [
        //< 推荐状态；0->非推荐；1->推荐 -->
        { text: "全部", value: -1 },
        { text: "非推荐", value: 0 },
        { text: "推荐", value: 1 }
      ],
      previewStatusOption: [
        //< 是否为预告商品：0->不是；1->是 -->
        { text: "全部", value: -1 },
        { text: "非预告", value: 0 },
        { text: "预告商品", value: 1 }
      ],
      promotionTypeOption: [
        // '促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购',
        { text: "全部", value: -1 },
        { text: "没有促销", value: 0 },
        { text: "促销价", value: 1 },
        { text: "会员价", value: 2 },
        { text: "阶梯价格", value: 3 },
        { text: "满减价格", value: 4 },
        { text: "限时购", value: 5 }
      ]
    };
  },
  created() {
    this.getTabCategory();
  },
  methods: {
    onChange(index) {},
    // 获取店铺下分类列表
    getTabCategory() {
      tabCategorylist(this.$store.getters.shopId).then(response => {
        this.tabCategorys = response.data;
        this.productparam.tabCategoryId = this.tabCategorys[0].id;
        this.productList = [];
        this.productparam.pageNum = 1;
        this.finished = false;
        this.loading = true;
        this.getproductList();
      });
    },

    // 获取分类下商品
    getproductList(tabCategoryId) {
      if (!this.productparam.tabCategoryId) {
        return;
      }
      listProduct(this.productparam).then(response => {
        this.productList = this.productList.concat(response.data);
        if (response.data.length == 0) {
          this.finished = true;
        }
        this.loading = false;
        this.productparam.pageNum = this.productparam.pageNum + 1;
        this.$forceUpdate();
      });
    },

    ontabCategoryChange(value) {
      this.productparam.tabCategoryId = this.tabCategorys[value].id;
      this.productList = [];
      this.productparam.pageNum = 1;
      this.finished = false;
      this.loading = true;
      this.getproductList();
    },

    onClickCreateTabCategoryButton() {
      window.webkit.messageHandlers.createTabCategory.postMessage("");
    },
    onClickProduct() {
      this.$router.push({ path: "/addProduct" });
    },
    handleProject(value) {
      this.$router.push({ path: "/scan/?id=" + value.id });
    },
    onDropdownChange(value) {
      this.productList = [];
      this.productparam.pageNum = 1;
      this.finished = false;
      this.loading = true;
      this.getproductList();
    },
    onfitterCommit() {
      this.productList = [];
      this.productparam.pageNum = 1;
      this.finished = false;
      this.loading = true;
      this.$refs.item.toggle();
      this.getproductList();
    },
    onDeleteProduct(item) {
      this.loading = true;
      deleteProduct(item.id).then(response => {
        this.productList = [];
        this.productparam.pageNum = 1;
        this.finished = false;
        this.loading = true;
        this.getproductList();
      });
    },
    onChangeProductPushtState(item, pushtState) {
      this.loading = true;
      item.publishStatus = pushtState;
      updateProduct(item.id, item).then(response => {
        this.listLoading = false;
        this.$message.success("操作成功");
      });
    }
  }
};
</script>
<style scoped>
.tab-sidebar {
  position: fixed;
  top: 44px;
  width: 120px;
  bottom: 44px;
}
.tab-content {
  overflow: auto;
  position: fixed;
  top: 44px;
  left: 120px;
  bottom: 44px;
}
</style>